<template>
	<div class="my-title">
		<div class="my-title__title">{{ title }}</div>
		<div v-if="title && subtitle" class="my-title__divider"></div>
		<div class="my-title__subtitle">
			<base-icon class="icon" name="hint" v-if="showSubIcon"></base-icon>
			{{ subtitle }}
		</div>
	</div>
</template>

<script lang="ts" setup>
import BaseIcon from '@/components/base/icon/index.vue'

defineProps({
	title: {
		type: String,
		default: ''
	},
	subtitle: {
		type: String,
		default: ''
	},
	showSubIcon: {
		type: Boolean,
		default: false
	}
})
</script>
<style lang="scss" scoped>
.my-title {
	&__title {
		font-size: 17px;
		line-height: 24px;
	}
	&__divider {
		height: 6px;
	}
	&__subtitle {
		display: flex;
		font-size: 12px;
		line-height: 16px;
		color: var(--color-text-2);
		.icon {
			margin-right: 2px;
			font-size: 15px;
		}
	}
}
</style>
